/* 
 项目 同时用到了两个接口
 1 接口1  http://baidu.com     50次
 2 接口2  http://qq.com         50次



 */
// 全局的axios 
import axios from "axios";
import { Toast } from "antd-mobile";
// 设置 公共的url
// axios.defaults.baseURL = 'http://baidu.com ';

// 百度接口
// let axios1=axios.create({ baseURL: 'https://baidu.com ' });
// // QQ
// let axios2=axios.create({ baseURL: 'https://QQ.com ' });

// 创建一个新的axios
// const baseURL=process.env.REACT_APP_API
export const baseURL = process.env.REACT_APP_API;
export let request = axios.create({ baseURL });



// 同时发送出去的请求个数
let times = 0;


// 添加请求拦截器
request.interceptors.request.use(function (config) {
  times++;
  Toast.loading('加载中', 0);
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  times--;
  if (times === 0) {
    // 所有的请求 都回来了
    Toast.hide();
  }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});



/*

  1 打开了首页的时候
  2 首页 同时发送了 3个请求出去
    请求拦截器被调用三次  加载中的组件 被显示三次
  3 请求回来了
    1 第一个请求 1s就回来了 => 关闭 加载中 组件
    2 剩下两个请求 需要 10s后 才回来
      数据还没有回来 页面 大片空白  已经没有了加载中的组件效果
  4 解决方案:
    1 Promise.all()
      请求都回来了 才触发
    2 自己维护一个变量 统一 同时发送请求的个数即可

*/